<template>
	<page-container :shownav="true" :isback="true" navtitle="我的专业" :istabbox="false" rightBtn="添加"
		@rightClick="rightClick">
		<view class="content-root content">
			<view class="content-box">
				<view class="content-item mine-list" v-for="(item,index) in itemData" :key="index">
					<view class="row">
						<view class="grid">
							<view class="item">
								<view class="title">
									{{ item.majorName }}
								</view>
							</view>
							<!-- <view class="arrow">&gt;</view> -->
							<u-icon name="trash" size="20" color="#000" @click="delMajor(item.id)"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showModal" :round="10" mode="center" @close="showModal=false">
			<view style="padding-bottom: 20rpx;width: 500rpx;">
				<view
					style="padding: 20rpx;text-align: center;font-size: 30rpx;font-weight: 800;background-color: rgba(252, 189, 189, 1);border-radius: 10px 10px 0 0;">
					添加专业</view>
				<view style="padding: 20rpx;text-align: center;font-size: 30rpx;color: #434141;">
					<u-input placeholder="请输入专业名称" disabledColor="#ffffff" v-model="majorStr">
					</u-input>
				</view>
				<view style="display: flex;padding: 20rpx;justify-content: center;">
					<view @click="addMajor"
						style="width: 245rpx;height: 60rpx;line-height: 60rpx; border-radius: 10rpx;background-color: rgba(216, 30, 6, 1); text-align: center;color:#fff;font-size: 30rpx;">
						确认添加</view>
				</view>
			</view>
		</u-popup>
		<!-- <u-modal :show="showModal" title="退出登录" content='是否换个账号登录' confirmText="换个账号" cancelText="直接退出"
			:showCancelButton="true"></u-modal> -->
	</page-container>
</template>

<script>
	import {
		getQueryHeaders,
		requestGet,
		requestPost,
		requestDelete
	} from "@/util/means/request";
	import {
		GET_PERFORMING_MAJOR,
		DELETE_PERFORMING_MAJOR,
		POST_PERFORMING_MAJOR
	} from "@/api/user";

	export default {
		data() {
			return {
				itemData: [],
				showModal: false,
				majorStr: ''
			}
		},
		onLoad() {
			this.getList()
		},

		methods: {
			getList() {
				requestGet({
					url: GET_PERFORMING_MAJOR,
					header: getQueryHeaders()
				}).then(res => {
					console.log(res, "######################");
					this.itemData = res

				}).catch(e => {})
			},
			rightClick() {
				this.showModal = true
				this.majorStr = ""
			},
			addMajor() {
				this.showModal = false
				requestPost({
					url: POST_PERFORMING_MAJOR,
					data: {
						majorName: this.majorStr
					},
					header: getQueryHeaders()
				}).then(res => {
					console.log(res, "######################");
					this.getList()
				}).catch(e => {})
			},
			delMajor(id) {
				requestDelete({
					url: DELETE_PERFORMING_MAJOR + "?majorId=" + id,
					data: {
						majorId: id
					},
					header: getQueryHeaders()
				}).then(res => {
					console.log(res, "######################");
					this.getList()
				}).catch(e => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-root {
		overflow: auto;
		height: 100%;
	}

	.content-box {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		// background: url('/static/img/bg.png');
		box-sizing: border-box;

		.mine-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #222222;
			font-size: 36rpx;

			.info {
				display: flex;
				align-items: center;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: $border-radius-circle;
					background: #FFF;
				}
			}
		}


		.mine-list {
			width: 100%;
			background-color: $bg-color-white;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: $border-radius-lg;
			box-sizing: border-box;

			.row {
				.grid {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 0;

					.item {
						display: flex;
						align-items: center;
					}

					image {
						width: 30rpx;
						height: 30rpx;
						margin-bottom: 0;
					}

					.title {
						align-items: center;
						font-size: $font-size-lg;
						margin-left: 30rpx;
					}

					.arrow {
						margin-top: -10rpx;
						font-size: $font-size-lg;
						color: #ababab;
					}
				}
			}
		}

		.serve {
			.content-item {
				padding: 20rpx;
				//background-color: red;
				background-color: $bg-color-white;
				border-radius: $border-radius-lg;
				margin-bottom: 20rpx;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.title {
						font-size: $font-size-lg;
						font-weight: 500;
					}

					.subtitle {
						font-size: $font-size-base;
						color: $text-color-grey;
					}
				}

				.row {
					display: flex;
					flex-wrap: wrap;

					.grid {
						width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 10rpx 0;
						// padding: 20rpx;

						image {
							width: 70rpx;
							height: 70rpx;
							margin-bottom: $spacing-row-base;
						}

						.title {
							font-size: $font-size-base;
							color: $text-color-base;
							display: flex;
							align-items: baseline;
						}
					}

				}

				.content-news {

					//background-color: red;
					.news-list {
						margin: 30rpx 0;
						padding-bottom: 30rpx;
						border-bottom: #C7C7C7 1rpx solid;
						display: flex;

						.news-img {
							image {
								width: 243rpx;
								height: 151rpx;
								border-radius: $border-radius-lg;
							}
						}

						.news-content {
							margin-left: 30rpx;
							width: 470rpx;

							.content-top {
								//padding: 2px 0;
								font-size: 30rpx;
								width: 420rpx;
								height: 80rpx;
								color: #222222;
								//background-color: yellow;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
							}

							.content-bottom {
								margin-top: 40rpx;
								font-size: 26rpx;
								color: #ABABAB;
								//background-color: pink;
							}
						}
					}

					.news-list:last-child {
						border-bottom: none;
						margin-bottom: 0;
						padding-bottom: 0;
					}
				}
			}
		}

		.advertisement {
			margin-top: 30rpx;

			img {
				width: 100%;
				border-radius: $border-radius-lg;
				margin-bottom: 30rpx;
			}
		}
	}
</style>